
import { ComponentProps, Mut, VueComponent } from "vue3-oop";
import { FormItem, InputNumber, Tabs, TabPane, Button } from 'ant-design-vue';
import { FormData, WidgetItem } from '@/components/FormDesigner/types';
import { LAYOUT } from '../attr-widget'

interface IProps {
  formData: FormData,
  widgetItem: WidgetItem
}
export default class CfgLayout extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetItem: {}
  }

  @Mut() layoutWinSize = this.props.formData.winSize

  render(){
    const { formData,widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as LAYOUT;

    return(
      <Tabs
        size="small"
        type="card"
        activeKey={this.layoutWinSize}
        onChange={(value)=>{this.layoutWinSize = value as any}}
      >
        {{
          leftExtra: ()=>(<Button size="small" onClick={()=>{this.layoutWinSize=formData.winSize}} style={{marginRight:'10px'}}>当前</Button>),
          default: ()=>Object.keys(attr.layout_reactive).map((winSize)=>{
            return (<TabPane key={winSize} tab={winSize.toUpperCase()}>
            <FormItem label="占用宽度">
              <InputNumber 
                size='small' min={1} max={24} addon-after="格" style={{width:'100%'}}
                value={(attr.layout_reactive as any)[winSize].span} 
                onChange={(value)=>{(attr.layout_reactive as any)[winSize].span=Number(value)}}
              />
            </FormItem>
            <FormItem label="向左移动">
              <InputNumber 
                size='small' min={0} max={24} addon-after="格" style={{width:'100%'}}
                value={(attr.layout_reactive as any)[winSize].pull} 
                onChange={(value)=>{(attr.layout_reactive as any)[winSize].pull=Number(value)}}
              />
            </FormItem>
            <FormItem label="向右移动">
              <InputNumber 
                size='small' min={0} max={24} addon-after="格" style={{width:'100%'}}
                value={(attr.layout_reactive as any)[winSize].push} 
                onChange={(value)=>{(attr.layout_reactive as any)[winSize].push=Number(value)}}
              />
            </FormItem>
            <FormItem label="向右偏移">
              <InputNumber 
                size='small' min={0} max={24} addon-after="格" style={{width:'100%'}}
                value={(attr.layout_reactive as any)[winSize].offset} 
                onChange={(value)=>{(attr.layout_reactive as any)[winSize].offset=Number(value)}}
              />
            </FormItem>
            <FormItem label="顺序">
              <InputNumber 
                size='small' min={0} style={{width:'100%'}}
                value={(attr.layout_reactive as any)[winSize].order} 
                onChange={(value)=>{(attr.layout_reactive as any)[winSize].order=Number(value)}}
              />
            </FormItem>
          </TabPane>)
          })
        }}
      </Tabs>
    )
  }
}